import { cloneDeep } from 'lodash-es'
import { useEffect, useState } from 'react'

import dg from './imgs/dg.png'
import hg from './imgs/hg.png'
import jj from './imgs/jj.png'
import tdph from './imgs/tdph.png'
import yy from './imgs/yy.png'
import zrph from './imgs/zrph.png'

const WorkerInfo = ({ topCount }) => {
  const {
    count, // 护工数量
    freeCount, // 待岗数量
    personalCompanionCount, // 专人陪护数量
    teamCompanionCount, // 团队陪护数量
    inHospitalCount, // 医院数量
    inHomeCount, // 居家数量
  } = topCount
  useEffect(() => {
    setInfoList(list => {
      const cloneList = cloneDeep(list)
      cloneList[0].children[0].value = count
      cloneList[1].children[0].value = freeCount
      cloneList[1].children[1].value = personalCompanionCount
      cloneList[1].children[2].value = teamCompanionCount
      cloneList[2].children[0].value = inHospitalCount
      cloneList[2].children[1].value = inHomeCount
      return cloneList
    })
  }, [topCount])
  const [infoList, setInfoList] = useState([
    {
      color: 'border-blue',
      children: [
        {
          name: '护工人数',
          value: 0,
          img: hg,
        },
      ],
    },
    {
      color: 'border-blue',
      children: [
        {
          name: '待岗',
          value: 0,
          img: dg,
        },
        {
          name: '专人陪护',
          value: 0,
          img: zrph,
        },
        {
          name: '团队陪护',
          value: 0,
          img: tdph,
        },
      ],
    },
    {
      color: 'border-orange',
      children: [
        {
          name: '医院',
          value: 0,
          img: yy,
        },
        {
          name: '居家',
          value: 0,
          img: jj,
        },
      ],
    },
  ])
  return (
    <div className='mb-4 flex h-24 gap-4'>
      {infoList.map((info, index) => (
        <div
          key={index}
          className={`flex flex-auto justify-around border-0 border-t-2 px-6 shadow ${info.color} border-solid`}
        >
          {info.children.map(({ name, value, img }) => (
            <div key={name} className='flex-grow-1 flex items-center gap-4'>
              <img src={img} alt={name} className='size-12' />
              <div className='flex flex-col justify-between'>
                <span className='text-coolGray flex-none truncate'>{name}</span>
                <span className='text-2xl'>{value}</span>
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}

export default WorkerInfo
